require('../css/commonCss/normalize.css')
require('../css/commonCss/basic.css')
require('../css/commonCss/property.css')
require('../css/commonCss/reset.css')
require('../liabs/iconfont/iconfont.css')
require('../css/commonCss/footer.less')
require('../css/motionData.less')

const { default: axios } = require('axios')
const echarts = require('../liabs/echarts')
// console.log(echarts)



window.addEventListener('load', function () {

  /* 获取元素 */
  const goBack = document.querySelector('#goBack')
  let middleBox = document.getElementById('middleBox')
  let btmBox = document.getElementById('btmBox')
  const coursetims = document.querySelector('#coursetims')
  const calorie = document.querySelector('#calorie')
  const imgUrl = document.querySelector('#imgUrl')
  const punchin = document.querySelector('#punchin')
  // console.log(middleBox)

  function setWeekData() {
    const myChart = echarts.init(document.getElementById('middleBox'));
    // console.log(myChart)

    // 指定图表的配置项和数据
        var option = {
            title: {
                text: '近7天运动时长',
                left: 10,
                top: 10,
                textStyle:{
                  fontSize: 16,
                  fontWeight:'normal'
                }
            },
            tooltip: {},
            xAxis: {
                data: ['2-11', '2-12', '2-13', '2-14', '2-15', '2-16','2-17']
            },
            yAxis: {},
            grid:{
              height:'65%',
              top: '23%'
            },

            series: [
                {
                    name: '运动量',
                    type: 'bar',
                    data: [25, 60, 80, 40, 90, 90,30],
                    color: 'skyblue'
                },
            ]
        };
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
  }

  function setSportClass(){
    const myChart = echarts.init(document.getElementById('classifBox'));
    var option = {
      title: {
        text: '运动分类',
        left: '10px',
        top: '10px',
        textStyle:{
          fontSize: 16,
          fontWeight:'normal'
        }
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: '10px',
        top:'middle',
        itemWidth: 20,
        itemHeight: 20,
        icon: 'rect'
      },
      grid:{
        left: '3%',
        right: '20%',
        bottom: '3%',
        width: '80%',
        height:'80%',
        containLabel: true
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '70%',
          label:{
            position:'inner',
            formatter:'{d}%',
            fontSize: '12px',
          },
          data: [
            { value: 1048, name: '跑步',itemStyle:{color:'#58bb92',}},
            { value: 735, name: '骑行',itemStyle:{color:'#736171'}},
            { value: 580, name: '训练',itemStyle:{color:'#ee5c43'}}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
     // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
  }

  function setSenevdata(){
    const myChart = echarts.init(document.getElementById('sevenClassifBox'));
    var option = {
      title:{
        text: '近7天运动分类',
        left: 10,
        top: 10,
        textStyle:{
          fontSize: 16,
          fontWeight:'normal'
        }
    },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      legend: {
        orient: 'vertical',
        left:'right',
        top:'middle',
        itemWidth:20,
        itemHeight:20,
        icon:'rect'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        width:'80%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['2-11', '2-12', '2-13', '2-14', '2-15', '2-16','2-17']
      },
      series: [
        {
          name: '跑步',
          type: 'bar',
          stack: 'total',
          label: {
            show: false
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
          name: '骑行',
          type: 'bar',
          stack: 'total',
          label: {
            show: false
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '训练',
          type: 'bar',
          stack: 'total',
          label: {
            show: false
          },
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        }
      ]
    };
     // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
  }
  
  function setTrainFreq(){
    const myChart = echarts.init(document.getElementById('trainFreq'));
    var option = {
      title:{
        text:'近7天训练次数',
        left: 10,
        top: 10,
        textStyle:{
          fontSize: 16,
          fontWeight:'normal'
        }
      },
      xAxis: {
        type: 'category',
        data: ['2-11', '2-12', '2-13', '2-14', '2-15', '2-16','2-17']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [12,14,11,10,6,7,9],
          type: 'line',
          itemStyle:{
            color:'skyblue',
          }
        }
      ]
    };
     // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
  }

  setWeekData()
  setSportClass()
  setSenevdata()
  setTrainFreq()


  //点击return，返回上一个页面
  goBack.addEventListener('click', function () {
    history.go(-1)
  })

  axios.get('http://139.9.177.51:8099/sports/exerciseData?id=' + localStorage.userId)
    .then(function (res) {
      // console.log(res.data)
      let data = res.data.data
      // console.log(data)
      coursetims.textContent = Math.ceil(data.coursetims / 60)//总运动分钟数
      calorie.textContent = data.calorie //消耗的千卡数
    })

  axios.get('http://139.9.177.51:8099/users/accountinfo?userId=' + localStorage.userId).then(function (res) {
    console.log(res.data)
    let data = res.data.data
    console.log(data.imgurl)
    imgUrl.src = data.imgurl
  })


  axios.get("http://139.9.177.51:8099/users/mysportsBadge?userId=" + localStorage.userId).then(function (res) {
    let data = res.data.data.sports;
    console.log(data)
    punchin.textContent = data.punchin
  })


})

